<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

import fullpage from 'fullpage.js'
import MyPage1 from './components/MyPage1.vue'
import MyPage2 from './components/MyPage2.vue'
import MyPage3 from './components/MyPage3.vue'
import MyPage4 from './components/MyPage4.vue'
import MyPage5 from './components/MyPage5.vue'
import MyPage6 from './components/MyPage6.vue'
import MyPage7 from './components/MyPage7.vue'
import MyPage8 from './components/MyPage8.vue'

let myFullpage
const myPage1Ref = ref(null)
const myPage2Ref = ref(null)
const myPage3Ref = ref(null)
const myPage4Ref = ref(null)
const myPage5Ref = ref(null)
const myPage6Ref = ref(null)
const myPage7Ref = ref(null)
const myPage8Ref = ref(null)

onMounted(() => {
  myFullpage = new fullpage('#fullpage', {
    normalScrollElements: '#allmap', // 滚动地图元素时避免自动滚动
    navigation: true,
    navigationTooltips: [
      '首页',
      '邀请信',
      '社团介绍',
      '加入优势',
      '活动图片',
      '地址导航（地图）',
      '在线报名（表单）',
      '结束',
    ],
    anchors: ['page1', 'page2', 'page3', 'page4', 'page5', 'page6', 'page7', 'page8'],
    beforeLeave: function (origin, destination, direction, trigger) {
      if (destination.index === 0) {
        myPage1Ref.value.addAnimate()
      } else if (destination.index === 1) {
        myPage2Ref.value.openEnvelope()
      } else if (destination.index === 2) {
        myPage3Ref.value.addAnimate()
      } else if (destination.index === 3) {
        myPage4Ref.value.addAnimate()
      } else if (destination.index === 4) {
        myPage5Ref.value.addAnimate()
      } else if (destination.index === 5) {
        myPage6Ref.value.addAnimate()
      } else if (destination.index === 6) {
        myPage7Ref.value.addAnimate()
      } else if (destination.index === 7) {
        myPage8Ref.value.addAnimate()
      }
    },
    onLeave: function (origin, destination, direction, trigger) {
      if (origin.index === 0) {
        myPage1Ref.value.removeAnimate()
      } else if (origin.index === 1) {
        // 无代码
      } else if (origin.index === 2) {
        myPage3Ref.value.removeAnimate()
      } else if (origin.index === 3) {
        myPage4Ref.value.removeAnimate()
      } else if (origin.index === 4) {
        myPage5Ref.value.removeAnimate()
      } else if (origin.index === 5) {
        myPage6Ref.value.removeAnimate()
      } else if (origin.index === 6) {
        myPage7Ref.value.removeAnimate()
      } else if (origin.index === 7) {
        myPage8Ref.value.removeAnimate()
      }
    },
    afterResize: function (width, height) {
      myPage1Ref.value.initCharacter()
    },
  })
})
</script>

<template>
  <div id="fullpage">
    <div class="section"><MyPage1 ref="myPage1Ref" /></div>
    <div class="section"><MyPage2 ref="myPage2Ref" /></div>
    <div class="section"><MyPage3 ref="myPage3Ref" /></div>
    <div class="section"><MyPage4 ref="myPage4Ref" /></div>
    <div class="section"><MyPage5 ref="myPage5Ref" /></div>
    <div class="section"><MyPage6 ref="myPage6Ref" /></div>
    <div class="section"><MyPage7 ref="myPage7Ref" /></div>
    <div class="section"><MyPage8 ref="myPage8Ref" /></div>
  </div>
</template>

<style scoped>
.section {
  position: relative;
  padding: 5%;
  background-image: url('@/assets/image/bg.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.section::before {
  content: '';
  position: absolute;
  top: 5%;
  left: 5%;
  width: 90%;
  height: 90%;
  background-color: rgba(255, 255, 255, 0.5);
}
</style>
